<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			#msg-list .iconfont {
				font-size: 30px;
				border-radius: 5px;
				min-width: 60px;
				height: 60px;
				text-align: center;
				line-height: 68px;
			}
			
			.type-0 {
				background-color: #CCCACA; /*其它 灰*/
				color: #FFFFFF;
			}	
			
			.type-1,
			.type-2 {
				background-color: #FFFFFF;
				color: #FEB406;
			}
			
			.type-3 {
				background-color: #31C27D; /*账户 绿*/
			}
			
			.type-4 {
				background-color: #face4b; /*资金 黄*/
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">系统消息</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view" id="msg-list">
				<!--<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<div class="iconfont mui-pull-left mui-media-object type-2">
							&#xe62d;
						</div>
						<div class="mui-media-body">
							演艺审核通过
							<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							<p>2017-02-14 17:29</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
						<div class="mui-media-body">
							艺人已报名
							<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							报名截止通知
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							交易进度更新
							<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
						<div class="mui-media-body">
							对方已评价
							<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							您被 金池 雇佣了
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							新的粉丝！
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							金池 刚刚评论了您的作品
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							实名认证已通过
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							恭喜您，诚信等级升为4级！
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							提现已到账
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							退款已到账
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							您有3张现金券即将过期
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
						<div class="mui-media-body">
							推荐
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>-->
			</ul>
			<a id="addMore" class="mui-btn btn-immer">点击加载更多</a>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var msgList = document.getElementById("msg-list");
			var addMoreBtn = document.getElementById("addMore");
			var now = new Date().getTime();
			var page = 1;
			// 消息类别图标
			var typeicons = ['&#xe616;', '&#xe716;', '&#xe629;', '&#xe625;', '&#xe626;'];
			var url = baseURL + 'systemmsg/getList/' + now + '/' + page + '/5.json';
			mui.plusReady(function() {
				getData(url);
				mui('.mui-content').on('tap', '#addMore', function() {
					getData(baseURL + 'systemmsg/getList/' + now + '/' + ( ++ page) + '/5.json');
				})
			
				function getData(url) {
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							var data = data.result;
							if(data.length) {
								for(var i = 0; i < data.length; i++) {
									createMsgList(Number(data[i].type), data[i].topic, data[i].id, data[i].releaseTime, data[i].details);
								}
								addMoreBtn.style.display = 'block';
							} else {
								if(page > 1) {
									mui.toast('已加载全部内容');
								} else {
									Common.showState(msgList, '&#xe69d;', '没有收到任何消息', 50);
								}
								addMoreBtn.style.display = 'none';
							}
						} else {
							mui.toast('加载失败，请稍后重试');
						}
					}, function(xhr) {
						Common.linkError();
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}
			})
			
			/**
			 * @param {Object} type		消息类别
			 * @param {Object} title	消息标题
			 * @param {Object} id		消息id
			 * @param {Object} time		消息时间
			 * @param {Object} message	消息内容
			 */
			function createMsgList(type, title, id, time, message) {
				var msg = document.createElement('li');
				msg.className = 'mui-table-view-cell mui-media';
				msg.id = id;
				var str = '<a href="javascript:;"><div class="iconfont mui-pull-left mui-media-object type-';
				str += type + '">' + typeicons[type] + '</div><div class="mui-media-body">' + title + '<p class="mui-ellipsis">';
				str += message + '</p><p>' + time + '</p></div></a>';
				msg.innerHTML = str;
				msgList.appendChild(msg);
			}
			
		</script>
	</body>

</html>